<script setup lang='ts'>
import { computed, ref,onMounted } from 'vue'
import { NTag,NSelect,NDatePicker,NFormItem,NInput,NModal, NTabPane, NTabs,useMessage,NTable,NPagination,NForm,NButton } from 'naive-ui'
import { SvgIcon } from '@/components/common'
import { t } from '@/locales';
import {getConsumerRecordList} from '@/api/consumerRecord'
import {ConsumerRecordReq,ConsumerRecordPage,ConsumerRecord} from '@/typings/consumerRecord'
import {serviceTypeOptions} from '@/api/ServiceTypeConstant'

interface Props {
  visible: boolean
}

interface Emit {
  (e: 'update:visible', visible: boolean): void
}
const props = defineProps<Props>()

const emit = defineEmits<Emit>()

const show = computed({
  get() {
    return props.visible
  },
  set(visible: boolean) {
    emit('update:visible', visible)
  },
})

const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const formValue = ref<ConsumerRecordReq>(Object.create(null))
const data = ref<ConsumerRecordPage>(Object.create(null))
// const formValue = ref<CouponDeleteReq>(Object.create(null))

async function search() {
    formValue.value.page = page.value
		formValue.value.pageSize = pageSize.value
    data.value = await getConsumerRecordList(formValue.value)

    total.value = Math.floor(data.value.total / pageSize.value);
    if (data.value.total % pageSize.value == 0) {
        total.value = total.value;
    } else {
        total.value = total.value + 1;
    }
}

onMounted(async ()=>{
    await search()
})


function changePage(newPage:number) {
		page.value = newPage
		search()
}

</script>

<template>
<!--		<n-form-->
<!--			inline-->
<!--			:model="formValue"-->
<!--			:size="'medium'">-->
<!--			<n-form-item>-->
<!--				<n-button attr-type="button" @click="search">-->
<!--					搜索-->
<!--				</n-button>-->
<!--			</n-form-item>-->
<!--		</n-form>-->


		<div style="width: 100%;height: 500px;overflow: auto;">
			<n-table :single-line="false" >
				<thead>
				<tr>
					<th>创建时间</th>
					<th>消费前</th>
					<th>操作金额</th>
					<th>消费后</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="record in data.records">
					<td>{{record.createTime}}</td>
<!--					<td>{{record.token}}</td>-->
					<td>
						{{record.costBefore}}$
					</td>
					<td>
						{{record.cost}}$
					</td>
					<td>
						{{record.costAfter}}$
					</td>
					<td>{{record.op}}</td>
				</tr>
				</tbody>
			</n-table>
		</div>
	  <br>
		<div style="display: flex;
								justify-content: center;
								align-items: center;">
<!--			<H2>{{title}}</H2>&nbsp;-->
			<n-pagination
				v-model:page="page"
				v-model:page-size="pageSize"
				v-model:page-count="total"
				@update:page="changePage"
				show-size-picker
				:page-sizes="[10, 20, 30, 40]"
			/>
		</div>
</template>
